<!--
 * @Description: 你的代码我的心
 * @Author: GGB
 * @Date: 2021-12-27 15:59:40
 * @LastEditors: GGB
 * @LastEditTime: 2021-12-28 16:20:43
-->
<!--
 * @Description: 你的代码我的心
 * @Author: GGB
 * @Date: 2021-12-27 14:31:48
 * @LastEditors: GGB
 * @LastEditTime: 2021-12-27 15:45:20
-->
<template>
  <div class="buyer-item">
    <Popover  trigger="hover">
      <template #content>
        用户ID:{{buyer.user_id}}
      </template>
       <Avatar v-if="buyer.avatar_url" :src="buyer.avatar_url" />
    <Avatar v-else>{{buyer.nick_name.substring(0,3)}}</Avatar>
    </Popover>
    <div class="content">
      <span class="buyer-name">{{ buyer.nick_name }}</span>
      <Tag :color="PlatformColorEnum[buyer.platform].value">{{platformTypeEnum[buyer.platform].name}}</Tag>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Avatar,Tag,Popover } from 'ant-design-vue';
import { Buyer } from '../model';
import {platformTypeEnum,PlatformColorEnum} from '/@/common/enum/platform';

defineProps<{
  buyer: Buyer
}>()
// 平台来源
// const platform={
//   'MP-TOUTIAO':"抖音"
// };

</script>
  
<style lang="less" scoped>
.buyer-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  margin: 5px 0;
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 10px;
    align-items: flex-start;
    .buyer-name{
      margin-bottom:5px;
    }
  }
}
</style>